﻿<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">

    <title>Dream游戏商城-个人中心</title>

    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon"/>
    <script src="js/jquery-3.3.1.min.js"></script>


    <!--=== Bootstrap CSS ===-->
    <link href="assets/css/vendor/bootstrap.min.css" rel="stylesheet">
    <!--=== Font-Awesome CSS ===-->
    <link href="assets/css/vendor/font-awesome.css" rel="stylesheet">
    <!--=== Plugins CSS ===-->
    <link href="assets/css/plugins.css" rel="stylesheet">
    <!--=== Helper CSS ===-->
    <link href="assets/css/helper.min.css" rel="stylesheet">
    <!--=== Main Style CSS ===-->
    <link href="assets/css/style.css" rel="stylesheet">

    <!-- Modernizer JS -->
    <script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <!--    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">-->

</head>

<body>

<!--== Start Header Section ==-->
<header id="header-area">
    <!-- Start PreHeader Area -->
    <div class="preheader-area">
        <div class="container">
            <div class="row">
                <div class="col-md-5 col-lg-6">
                    <div class="preheader-contact-info d-flex align-items-center justify-content-between justify-content-md-start">
                        <div class="single-contact-info">
                            <span class="contact-icon">
                                <i class="fa fa-envelope"></i>
                            </span>
                            <a href="mailto:your@example.com" class="contact-text">
                                <strong>Email:</strong> your account@email.HaHaHa
                                    </a>
                                </div>
                                <div class="single-contact-info">
                                    <span class="contact-icon">
                                        <i class="fa fa-phone"></i>
                                    </span>
                                    <a href="" class="contact-text">
                                        <strong>电话:</strong> (+86) 188-8888-8888
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-md-7 col-lg-6 mt-xs-10">
                    <div class="site-setting-menu">
                        <ul class="nav justify-content-center justify-content-md-end">
                            <li><a href="order.html">查看订单</a></li>
                            <li><a  id="logout" href="#" >注销登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End PreHeader Area -->

    <!-- Start Header Middle Area -->
    <div class="header-middle-area">
        <div class="container">
            <div class="row">
                <!-- Logo Area Start -->
                <div class="col-4 col-md-2 col-xl-3 m-auto text-center text-lg-left">
                    <a href="index.html" class="logo-wrap d-block">
                        <img src="assets/img/logo.png" alt="Logo" class="img-fluid"/>
                    </a>
                </div>
                <!-- Logo Area End -->
            </div>
        </div>
    </div>

</header>
<!--== End Header Section ==-->

<!--== Start Page Breadcrumb ==-->
<div class="page-breadcrumb-wrap">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="page-breadcrumb">
                    <ul class="nav">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="my-account.html" class="active">个人中心</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--== End Page Breadcrumb ==-->

<!--== Page Content Wrapper Start ==-->
<div id="page-content-wrapper">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <!-- My Account Page Start -->
                <div class="myaccount-page-wrapper">
                    <!-- My Account Tab Menu Start -->
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="myaccount-tab-menu nav" role="tablist">
                                <a href="#address-edit" data-toggle="tab" class="active"><i class="fa fa-map-marker"></i> 个人资料</a>
                                <a href="#account-info" data-toggle="tab"><i class="fa fa-user"></i> 修改密码</a>


                            </div>
                        </div>
                        <!-- My Account Tab Menu End -->

                        <!-- My Account Tab Content Start -->
                        <div class="col-lg-9 mt-15 mt-lg-0">
                            <div class="tab-content" id="myaccountContent">
                                <!-- Single Tab Content Start //address-edit-->
                                <div  id="address-edit" class="tab-pane fade show active" id="a" role="tabpanel">
                                    <div class="myaccount-content">
                                        <h3>个人资料</h3>

                                        <div id="useraccount" class="myaccount-content">


                                        </div>
                                        <button id="updateUserInfo" class="btn btn-priary">修改</button>
                                    </div>
                                </div>
                                <!-- Single Tab Content End -->


                                <!-- Single Tab Content Start -->
                                <div class="tab-pane fade" id="account-info" role="tabpanel">
                                    <div class="myaccount-content">
                                        <h3>修改密码</h3>


                                        <div class="account-details-form">
                                            <form action="US.action?op=uppwd" method="post">

                                                <fieldset>
                                                    <!-- current-pwd -->

                                                    <div class="single-input-item">
                                                        <label for="userpwd1" class="required">当前密码</label>
                                                        <input type="userpwd" name="userpwd" id="userpwd" class="userpwd" placeholder="当前密码" />
                                                    </div>
                                                    <!--  new-pwd -->


                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="single-input-item">
                                                                <label for="userpwd1" class="required">新密码</label>
                                                                <input type="userpwd1" name="userpwd1" id="userpwd1" class="userpwd1" placeholder="新密码" />
                                                            </div>
                                                        </div>
                                                        <!--   confirm-pwd -->


                                                        <div class="col-lg-6">
                                                            <div class="single-input-item">
                                                                <label for="userpwd1" class="required">确认密码</label>
                                                                <input type="userpwd2" name="userpwd2" id="userpwd2" class="userpwd2" placeholder="确认密码" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </fieldset>

                                                <div class="single-input-item">
                                                    <input type="button" id="up" class="btn" value="保存更改" style="color:blue"></input>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single Tab Content End -->
                            </div>
                        </div>
                        <!-- My Account Tab Content End -->
                    </div>
                </div>
                <!-- My Account Page End -->
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        getAcc();

    });


    $("#up").click(function (){

        let flag1=0;

        let flag2=0;

        let flag3=0;

        $.ajax({
            url: "http://localhost:8080/dreamgame/user/checkpwd/"+$("#userpwd").val(),
            // 是否异步
            async: false,
            // 后端接口返回的数据类型
            dataType: "json",
            // 提交请求的方式
            type: "get",
            // 请求成功后，服务端正常响应的回调函数
            success: function (r) {

                if(r.code== 1){
                    flag1=1;

                }else {
                    alert(r.msg);
                }
            }

        });

        if($("#userpwd1").val() != $("#userpwd2").val()){
            alert("两次密码不一致");
        }else {
            flag2=1;
        }



        if($("#userpwd1").val()!="" && $("#userpwd1").val()!="" ){
            flag3=1;
        }else {
            alert("密码不能为空");
        }



        if(flag1 ==1 && flag2 ==1 && flag3 ==1){

            $.ajax({
                url: "http://localhost:8080/dreamgame/user/updatepwd/"+$("#userpwd1").val(),
                // 是否异步
                async: true,
                // 后端接口返回的数据类型
                dataType: "json",
                // 提交请求的方式
                type: "put",
                // 请求成功后，服务端正常响应的回调函数
                success: function (r) {

                    if(r.code== 1){

                        alert("修改成功，请重新登录");
                        window.location.href="login.html";

                    }else {
                        alert(r.msg);
                    }
                }

            });
        }

    })








    $("#updateUserInfo").click(function (){


        $.ajax({
            // key : value
            // url 提交后端的url的地址,rest更改设计的接口，要注意格式.
            url: "http://localhost:8080/dreamgame/user/updateemail/"+$("#email").val(),
            // 是否异步
            async: true,
            // 后端接口返回的数据类型
            dataType: "json",
            // 提交请求的方式
            type: "put",
            // 请求成功后，服务端正常响应的回调函数
            success: function (responsedata) {
                alert(responsedata.msg);
                window.location.href="my-account.html";
                // console.log(responsedata);
            }

        });
    })




    function  getAcc() {

        //jQuery封装的方法
        $.ajax({
            // key : value
            // url 提交后端的url的地址,rest更改设计的接口，要注意格式.
            url: "http://localhost:8080/dreamgame/user/showaccount",
            // 是否异步
            async: true,
            // 后端接口返回的数据类型
            dataType: "json",
            // 提交请求的方式
            type: "get",
            // 请求成功后，服务端正常响应的回调函数
            success: function (responsedata) {
                console.log(responsedata);

                let userinfo = responsedata.data;

                let str = `
                         用户名:<input type="text" name="username" id="username" value="${userinfo.user_name}" readonly><br/>
                         性别： <input type="text" name="username" id="username"  value="${userinfo.sex}" readonly><br/>
                         帐号:  <input style="width:600px" type="text" name="account_number"   value="${userinfo.account_number}" readonly><br/>
                         邮箱(可改): <input type="text" name="email" id="email"  value="${userinfo.email}"><br/>`;
                // console.log(str);
                $("#useraccount").append(str);

            }

        });
    }



</script>


<!--== Page Content Wrapper End ==-->

<!--<script type="text/javascript">-->
<!--$(function(){-->
<!--   $("#Geuser").click(function(){-->
<!--	  var userid= $("#userid").val();-->
<!--	  var username= $("#username").val();-->
<!--	  var useraddress= $("#useraddress").val();-->
<!--	  var usertel= $("#usertel").val();-->
<!--	  -->
<!--	   console.log(userid);-->
<!--	   console.log(username);-->
<!--	   console.log(useraddress);-->
<!--	   console.log(usertel);-->
<!--	   -->
<!--	   -->
<!--    $.post("US.action","op=account&userid="+userid+"&username="+username+"&useraddress="+useraddress+"&usertel="+usertel,function(data,s){-->
<!--    	if(s=="success"){-->
<!--    		console.log(data);-->
<!--    		alert("您已修改个人资料，请重新登录");-->
<!--    		window.location.href="UsersLogin.html";-->
<!--    	}-->
<!--    })-->
<!--   })-->
<!--})-->
<!--</script>-->

<!--== Start Footer Area ==-->
<footer id="footer-area">
    <!-- Footer Widget Area Start -->
    <div class="footer-widget-area">
        <div class="container">
            <div class="footer-widget-content">
                <div class="row">


                    <!-- Single Widget-item Start -->
                    <div class="col-lg-3 col-sm-6">
                        <div class="single-widget-item">
                            <h3 class="widget-title">Contact Us</h3>
                            <div class="widget-body">
                                <div class="contact-info">
                                    <div class="single-contact-info">
                                    <span class="contact-icon">
                                        <i class="fa fa-home"></i>
                                    </span>
                                        <a href="mailto:your@example.com" class="contact-text">
                                            <strong>Address:</strong> 15/C, Uttara, Dhaka
                                        </a>
                                    </div>
                                    <div class="single-contact-info">
                                    <span class="contact-icon">
                                        <i class="fa fa-phone"></i>
                                    </span>
                                        <a href="mailto:your@example.com" class="contact-text">
                                            <strong>Phone:</strong> (+1) 866-540-3229
                                        </a>
                                    </div>
                                    <div class="single-contact-info">
                                    <span class="contact-icon">
                                        <i class="fa fa-envelope"></i>
                                    </span>
                                        <a href="mailto:your@example.com" class="contact-text">
                                            <strong>Email:</strong> your@email.here
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Single Widget-item End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Footer Widget Area End -->

    <!-- Footer Bottom Area -->
    <div class="footer-bttom-area">
        <div class="container">
            <div class="row">
                <!-- Copyright Text Area -->
                <div class="col-md-6 m-auto text-center text-md-left order-last order-md-first">
                    <p>版权所有 &copy; 2022.Dream游戏商城 保留所有权利。</p>
                </div>
                <!-- Copyright Text Area -->

                <!-- Payment Method Area -->
                <div class="col-md-6 m-auto text-center text-md-right">
                    <div class="payment-support">
                        <img src="assets/img/payment.png" alt="Payment" class="d-inline-block" />
                    </div>
                </div>
                <!-- Payment Method Area -->
            </div>
        </div>
    </div>
    <!-- Footer Bottom Area -->
</footer>
<!--== End Footer Area ==-->

<!-- Scroll to Top Start -->
<a href="#" class="scrolltotop"><i class="fa fa-angle-up"></i></a>
<!-- Scroll to Top End -->

<!--== Product Quick View Modal Area Wrap ==-->
<div class="modal" id="quickView" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true"><img src="assets/img/icons/cancel.png" alt="Close" class="img-fluid" /></span>
            </button>
            <div class="modal-body">
                <div class="quick-view-content single-product-page-content">
                    <div class="row">
                        <!-- Product Thumbnail Start -->
                        <div class="col-lg-5 col-md-6">
                            <div class="product-thumbnail-wrap">
                                <div class="product-thumb-carousel owl-carousel">
                                    <div class="single-thumb-item">
                                        <a href="single-product.html"><img class="img-fluid" src="assets/img/single-pro-1.jpg" alt="Product" /></a>
                                    </div>

                                    <div class="single-thumb-item">
                                        <a href="single-product.html"><img class="img-fluid" src="assets/img/single-pro-2.jpg" alt="Product" /></a>
                                    </div>

                                    <div class="single-thumb-item">
                                        <a href="single-product.html"><img class="img-fluid" src="assets/img/single-pro-3.jpg" alt="Product" /></a>
                                    </div>

                                    <div class="single-thumb-item">
                                        <a href="single-product.html"><img class="img-fluid" src="assets/img/single-pro-4.jpg" alt="Product" /></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Product Thumbnail End -->

                        <!-- Product Details Start -->
                        <div class="col-lg-7 col-md-6 mt-5 mt-md-0">
                            <div class="product-details">
                                <h2><a href="single-product.html">Crown Summit Backpack</a></h2>

                                <div class="rating">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star-half"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>

                                <span class="price">$52.00</span>

                                <div class="product-info-stock-sku">
                                    <span class="product-stock-status text-success">In Stock</span>
                                    <span class="product-sku-status ml-5"><strong>SKU</strong> MH03</span>
                                </div>

                                <p class="products-desc">Ideal for cold-weathered training worked lorem ipsum outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, reprehenderit.</p>
                                <div class="shopping-option-item">
                                    <h4>Color</h4>
                                    <ul class="color-option-select d-flex">
                                        <li class="color-item black">
                                            <div class="color-hvr">
                                                <span class="color-fill"></span>
                                                <span class="color-name">Black</span>
                                            </div>
                                        </li>

                                        <li class="color-item green">
                                            <div class="color-hvr">
                                                <span class="color-fill"></span>
                                                <span class="color-name">green</span>
                                            </div>
                                        </li>

                                        <li class="color-item orange">
                                            <div class="color-hvr">
                                                <span class="color-fill"></span>
                                                <span class="color-name">Orange</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="product-quantity d-flex align-items-center">
                                    <div class="quantity-field">
                                        <label for="qty">Qty</label>
                                        <input type="number" id="qty" min="1" max="100" value="1" />
                                    </div>

                                    <a href="shoppingcart.html" class="btn">Add to Cart</a>
                                </div>
                            </div>
                        </div>
                        <!-- Product Details End -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--== Product Quick View Modal Area End ==-->


<!--=======================Javascript============================-->
<!--=== Jquery Min Js ===-->
<script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
<!--=== Jquery Migrate Min Js ===-->
<script src="assets/js/vendor/jquery-migrate-1.4.1.min.js"></script>
<!--=== Popper Min Js ===-->
<script src="assets/js/vendor/popper.min.js"></script>
<!--=== Bootstrap Min Js ===-->
<script src="assets/js/vendor/bootstrap.min.js"></script>
<!--=== Ajax Mail Js ===-->
<script src="assets/js/ajax-mail.js"></script>
<!--=== Plugins Min Js ===-->
<script src="assets/js/plugins.js"></script>

<!--=== Active Js ===-->
<script src="assets/js/active.js"></script>
<script>
    $("#logout").click(function logout() {
        // console.log("调用登出方法");
        $.ajax({
            url: "http://localhost:8080/dreamgame/user/loginout",
            async: true,
            dataType: "json",
            type: "post",
            success: (r) => {
                alert(r.msg);
                window.location.href = "login.html";
            }
        })
    });
</script>
</body>
</html>